<template>
  <div class="special">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 严选专栏 </template>
    </my-header>
    <ul class="content">
      <li
        v-for="(item, index) in newList"
        :key="index"
        :style="{ 'background-image': `url(${item.pic})` }"
      >
        <h5>{{item.title}}</h5>
        <p>{{item.descript}}</p>
        <button @click="$router.push(`/spedetail?id=${item.id}`)">查看详情</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myHeader from "../../components/myHeader.vue";
import { getNews } from "../../api/home/index";
export default {
  components: { myHeader },
  setup() {
    const data = reactive({
      newList: [],
    });
    getNews().then((res) => {
      data.newList = res.data;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.special {
  height: 100%;
  .content {
    height: calc(100% - 50px);
    padding: 10px;
    overflow: auto;
    li {
      height: 191px;
      margin-bottom: 10px;
      background-size: 100% 100%;
      color: #fff;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      padding: 20px 0;
      box-sizing: border-box;
      h5{
        font-size: 18px;
        margin: 20px 0;
      }
      p{
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0 auto;
      }
      button{
        background: transparent;
        border: 1px solid #fff;
        border-radius: 15px;
        padding: 5px 10px;
        margin-top: 20px;
      }
    }
  }
}
</style>